.Supermarketlist {
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
  .et-flex-column-center();

  .filter {
    width: @content-width;
    background-color: white;

    .filter-criteria {
      width: 100%;
      min-height: 56px;
      line-height: 56px;
      border-bottom: 1px solid #eee;
      box-sizing: border-box;
      .et-flex-normal();

      .criteria-left {
        flex: 1;
        box-sizing: border-box;
        padding-left: 21px;
        .et-flex-normal();

        .criteria-title {
          font-size: 18px;
          color: #333;
        }

        .filter-group {
          flex: 1;
          line-height: 56px;
          margin-left: 31px;
          margin-right: 15px;
          .et-flex-normal();

          .filter-item {
            height: 24px;
            line-height: 24px;
            margin: 16px 12px 16px 0;
            display: inline-block;
            color: @second-color;
            background: #eff8f2;
            padding: 0 10px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 700;
            .et-flex-start();

            .icon {
              margin-left: 3px;
              color: @second-color;
              font-size: 12px !important;
              cursor: pointer;
            }
          }
        }
      }

      .criteria-right {
        width: 100px;
        cursor: pointer;
        user-select: none;
        .et-flex-normal();

        .icon {
          line-height: 56px !important;
          margin-right: 3px;
        }
      }
    }

    .filter-container {
      width: 100%;
      box-sizing: border-box;
      padding: 25px 30px;
      .et-flex-column-normal();

      .filter-row {
        width: 100%;

        &:not(:last-child) {
          margin-bottom: 30px;
        }

        .et-flex-normal();

        .filter-label {
          width: 70px;
          flex-shrink: 0;
        }

        .filter-cols {
          flex: 1;
          margin-left: 43px;
          .et-flex-normal();

          .filter-col {
            margin-right: 30px;
            cursor: pointer;

            &.checked {
              color: @second-color;
              font-weight: 700;
            }
          }
        }
      }
    }
  }

  .product-list {
    width: @content-width;
    margin-top: 20px;
    background-color: white;

    .product-toolbar {
      width: 100%;
      height: 50px;
      box-sizing: border-box;
      padding: 0 29px;
      border-bottom: 1px solid #eee;
      .et-flex-spacebetween();

      .toolbar-left {
        font-size: 18px;
        line-height: 50px;

        .high-weight {
          color: rgb(248, 97, 28);
        }
      }

      .toolbar-right {
        height: 50px;
        .et-flex-start();
        font-size: 16px;

        .toolbar-nav {
          height: 100%;
          padding: 0 15px;
          .et-flex-start();
          cursor: pointer;
          user-select: none;

          .checked {
            color: @second-color;
            font-weight: bold;
          }

          .toolbar-sort {
            margin-left: 5px;
            .et-flex-column-center();

            .toolbar-asc {
              width: 0;
              height: 0;
              border-bottom: 6px solid #333;
              border-right: 6px solid transparent;
              border-left: 6px solid transparent;
              border-top: 6px solid transparent;
              margin-bottom: 3px;

              &.checked {
                border-bottom: 6px solid @second-color;
              }
            }

            .toolbar-desc {
              width: 0;
              height: 0;
              border-top: 6px solid #333;
              border-right: 6px solid transparent;
              border-left: 6px solid transparent;
              border-bottom: 6px solid transparent;

              &.checked {
                border-top: 6px solid @second-color;
              }
            }
          }
        }
      }
    }

    .product-container {
      width: 100%;
      box-sizing: border-box;
      padding: 0 30px;
      .et-flex-column-normal();

      .product-item {
        width: 100%;
        padding: 30px 0;
        .et-flex-start();

        &:not(:last-child) {
          border-bottom: 1px solid #eee;
        }

        .product-img {
          width: 140px;
          height: 140px;
          position: relative;

          img {
            width: 140px;
            height: 140px;
            border-radius: 8px;
          }

          .foot-note {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30px;
            border-radius: 0 0 8px 8px;
            line-height: 30px;
            font-size: 12px;
            text-align: center;
            .et-text-nowrap();
            color: white;
            font-weight: 700;
            background: linear-gradient(90deg, @second-color, #7cdba0);
          }
        }

        .product-proName {
          flex: 1;
          margin-left: 30px;
          .et-flex-column-normal();

          .proName {
            width: 100%;
            line-height: 1;
            .et-flex-start();

            .name {
              max-width: 500px;
              font-size: 20px;
              font-weight: 500;
              cursor: pointer;

              &:hover {
                color: @second-color;
              }

              .et-text-nowrap();
            }

            .isInternet {
              width: 74px;
              height: 20px;
              margin-left: 10px;
              position: relative;

              &::before {
                content: "互联网产品";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                color: #fff;
                text-align: center;
                font-size: 12px;
                line-height: 20px;
                z-index: 1;
              }

              &::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(@second-color, .8);
                border-radius: 4px;
                transform: skewX(-10deg);
              }
            }

            .isOnline {
              width: 62px;
              height: 20px;
              margin-left: 10px;
              position: relative;

              &::before {
                content: "在线投保";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                line-height: 20px;
                color: #fff;
                text-align: center;
                font-size: 12px;
                z-index: 1;
              }

              &::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(@primary-color, .8);
                border-radius: 4px;
                transform: skewX(-10deg);
              }
            }
          }

          .introduce {
            font-size: 12px;
            width: 685px;
            .et-text-nowrap();
            flex-shrink: 0;
            margin-top: 13px;
            color: #68726c;
          }

          .highlights {
            width: 100%;
            margin-top: 7px;
            .et-flex-start();

            .highlight {
              margin: 7px 10px 7px 0;
              padding: 4px 8px;
              border-radius: 3px;
              background-color: #feefce;
              text-align: center;
              color: #7c4b00;
              font-size: 12px;
              line-height: 1;
              .et-text-nowrap();
            }
          }

          .config-info {
            margin-top: 17px;
            width: 685px;
            .et-flex-normal();

            .config-info-item {
              .et-flex-normal();
              margin-right: 50px;
              margin-bottom: 10px;

              span {
                &:nth-child(1) {
                  color: #68726c;
                }

                &:nth-child(2) {
                  color: #3d4640;
                }
              }
            }
          }
        }

        .product-prem {
          width: 130px;
          height: 140px;
          margin-left: 140px;

          .price {
            margin-top: 30px;
            line-height: 1;
            width: 130px;
            text-align: center;
            .et-flex-center();
            align-items: flex-end;

            span {
              color: @primary-color;
              font-weight: bold;

              &:nth-child(1) {
                font-size: 20px;
                margin-right: 5px;
              }
            }
          }

          .detail-btn {
            width: 90px;
            margin: 20px 0 0 19px;
            height: 34px;
            line-height: $height;
            text-align: center;
            color: @second-color;
            border: 1px solid @second-color;
            font-size: 16px;
            border-radius: 4px;
            cursor: pointer;
            user-select: none;
            .et-flex-center();
            &:hover {
              background-color: @second-color;
              color: white;
            }
          }
        }
      }
    }

    .pagination {
      width: 100%;
      padding: 20px 0;
      .et-flex-center();
      border-top: 1px solid #eee;
    }
  }
}

.Breadcrumb-Home {
  color: #303133;
  font-weight: bold;
  cursor: pointer;

  &:hover {
    color: @primary-color;
  }
}

.Breadcrumb-Supermarketlist {
  color: #606266;
}